<template>
    <div>
       <div class="content">
        <header>
                商家列表
        </header>

        <!-- 商家列表 -->
        <ul class="businesslist">
            <li v-for="(item,index) in businessList" :key="index" @click="tobusinessinfo(item.businessId)">
                <div class="businesslist-left">
                    <img :src="item.businessImg" alt="">
                    <div class="business-img-quantity" v-show="item.quantity>0">{{item.quantity}}</div>
                </div>
                <div class="businesslist-right">
                     <h3>{{item.businessName}}</h3>
                     <p>&#165;{{item.starPrice}} | &#165;{{item.deliveryPrice}}配送</p>
                     <p>{{item.businessExplain}}</p>
                </div>
            </li>
        </ul>

        <!-- 支撑部分 -->
        <div class="footer-top">

        </div>
         <Footer></Footer>
    </div>  
    </div>
</template>


<script>
import Footer from "../components/Footer";

export default {
    name:'BusinessList',
    data(){
        return{
            orderTypeId:this.$route.query.orderTypeId,
            businessList:[],
            user:''
        }
    },
    created(){
        this.user = this.$getSessionStorage("user");
        this.$get
        this.$axios.get("/BusinessController/listBusinessByOrderTypeId/"+this.orderTypeId
        ).then(response=>{
            this.businessList = response.data.data;

            for(let i=0;i<this.businessList.length;i++){
                this.businessList[i].quantity=0;
            }
            this.initCart();
        }).catch(error=>{
            console.log(error);
        });
    },
    components:{
        Footer
    },
    methods:{
        initCart(){
              //判断是否登录
      if(this.user !=null){
          //获取对应用户，对应商家的购物车信息
          this.$axios
        .get(
          "/CartController/listCart/"+this.user.userId+"/0",
        )
        .then((response) => {
            console.info(response);
            let cartlist = response.data.data;
            for(let cart of cartlist){
                    for(let business of this.businessList){
                        if(business.businessId == cart.businessId){
                                //证明商家有购物车记录
                               business.quantity+=cart.quantity;
                        }
                    }
            }
            this.businessList.sort();
        })
        .catch((error) => {
          console.log(error);
        });

      }
    },
        tobusinessinfo(businessId){
            this.$router.push({path:'/businessinfo',query:{businessId:businessId}});    
        }
    }
}
</script>


<style scoped>
    /* 总容器 */
.content{
    width: 100%;
    height: 100%;
}
/* 头部 */
.content header{
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    font-size: 4.8vw;
    color: #FFF;
    text-align: center;
    line-height: 12vw;
    position: fixed;
    top: 0vw;
    left: 0vw;
    z-index: 999;
}

.content .businesslist{
    margin-top: 12vw;
}
.content .businesslist li{
    box-sizing: border-box;
    padding: 2.5vw;
    display: flex;
    border-bottom: 1px solid #DDD;
}
.content .businesslist li .businesslist-left{
    position: relative;
}
.content .businesslist li .businesslist-left img{
    width: 20vw;
    height: 20vw;
}

.content .businesslist li .businesslist-left .business-img-quantity{
    width: 5vw;
    height: 5vw;
    font-size: 3.6vw;
    background-color: red;
    color: #FFF;
    border-radius: 2.5vw;
    text-align: center;
    line-height: 5vw;
    position: absolute;
    right: -1.5vw;
    top: -1.5vw;
}

.content .businesslist li .businesslist-right{
    margin-left: 3vw;
}
.content .businesslist li .businesslist-right h3{
    font-size: 3.8vw;
    color: #555;
}
.content .businesslist li .businesslist-right p{
    margin-top: 2vw;
    font-size: 3vw;
    color: #888;
}
</style>